import React, {useCallback, useEffect, useMemo, useState} from 'react'

// antd about
import {
  Form,
  Input,
  InputNumber,
  Select,
  Button,
  Table,
  Tag,
  Space,
  Switch,
  Modal,
  message,
  Popconfirm,
  Image,
} from 'antd';

const { Option } = Select;

const { Column, ColumnGroup } = Table;

// 库存，销售，记录 的 axios
import { getInventories, getStocks, getStocksPageList, getStocksUltimate, updateStockOfCell } from '../../api/stock'

import { addRecordData } from '../../api/records'

import { addOnSalesData, deleteOnSalesData, getOnSaleDataOfGoodsId } from '../../api/onSales'

// ?
import { fromPairs } from 'lodash';

// redux
import { useSelector } from 'react-redux';
import { generateCellRecord, generateDestroyCellRecord } from '../../utils/generateRecord';
import { useNavigate } from 'react-router-dom';

export default function InventoryList() {

  // 获取跳转路由的 navigate
  const navigate = useNavigate()

  //
  const [form] = Form.useForm()

  // 获取 redux 里的用户数据
  const username = useSelector((state) => state.user.info)

  // 页数
  const [pageOrder, setPageOrder] = useState(1)

  // 页数内容个数
  const [pageSize, setPageSize] = useState(3)

  // 商品数据 state
  const [goodsData, setGoodsData] = useState([])

  // 商品分类 state
  const [inventories, setInventories] = useState()

  // 商品总数
  const [total, setTotal] = useState(1)

  // 当前选择分类
  const [inventoryId, setInventoryId] = useState()

  // 当前查询内容
  const [name_like, setName_like] = useState()

  // 合并所有查询= 》
  const getGoodsList = useCallback(async({_page, _limit, inventoryId, name_like, operate}) => {
    // 包含了分页+类别+名字的查询
    const res = await getStocksUltimate({_page, _limit, inventoryId, name_like})
    // 设置商品数据
    setGoodsData(res)
    // 设置页码
    setPageOrder(_page)
    // 设置当前页个数
    setPageSize(_limit)
    // 设置查询id
    setInventoryId(inventoryId)
    // 设置查询字符串
    setName_like(name_like)
    // 如果 operate 为重置
    if (operate === 'reset') {
      // 查询所有商品内容
      const all = await getStocks()
      setTotal(all)
    } else {
      // 设置查询到的商品总数
      const Inquire = await getStocks({inventoryId, name_like})
      setTotal(Inquire)
    }
  }, [])

  // 缓存商品分类 useEffect
  useEffect(() => {
    // 获取商品分类
    const Inventory = async() => {
      try {
        // try 语句块中放置可能会出现异常的代码
        let res = await getInventories()
        // 设置数据
        setInventories(res)
      } catch (error) {
        // catch 语句块中是出现异常后，解决异常问题的代码
        console.log('异常：', error)
      } finally {
        // finally 语句块是无论是否出现异常，最终都会执行的代码
      }
    }
    Inventory()

    // 获取商品数据
    const Stock = async() => {
      // 获取商品总数
      const res2 = await getStocks()
      setTotal(res2)

      getGoodsList({_page: pageOrder, _limit: pageSize, inventoryId, name_like})
    }
    Stock()
  }, [])

  // 触发搜索
  const onFinish = useCallback((values) => {
    // 如果查询全部商品则不传递 inventoryId
    values.select === 7 ? values.select = undefined : values.select
    // 发送请求
    getGoodsList({_page: pageOrder, _limit: pageSize, inventoryId: values.select, name_like: values.goodsName})
  }, [])

  // 触发重置
  const onReset = useCallback(() => {
    // 重置form
    form.resetFields()
    // 重置分页和查询数据
    setInventoryId(undefined)
    setName_like(undefined)
    setPageOrder(1)
    setPageSize(3)
    // 重新发送请求
    getGoodsList({_page: pageOrder, _limit: pageSize, inventoryId: undefined, name_like: undefined, operate: 'reset'})
  }, [])

  // 触发分页
  const pageSelect = useCallback(async(page, _pageSize) => {
    getGoodsList({_page: page, _limit: _pageSize, inventoryId, name_like})
  }, [])

  // 保存当前点击的列表
  const [nowClickRowData, setNowClickRowData] = useState()

  // 开始销售
  const makeSell = useCallback((record) => {
    setNowClickRowData(record)
    if (record.sellState) {
      setIsModalVisible2(true)
    } else {
      setIsModalVisible(true)
    }
  }, [])

  // 模态框显示依赖
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isModalVisible2, setIsModalVisible2] = useState(false);

  //  表单 填入完成
  const handleOk = useCallback((values) => {
    // 验证出售数量
    if (values.amount === 0 || values.amount > nowClickRowData.amount) {
      message.warn('请注意你的出售数量！')
      return
    }
    // 验证出售价格
    if (values.sellPrice === nowClickRowData.buyPrice) {
      message.warn('不得按批发价出售！')
      return
    }
    // 调用出售方法
    handleUpdateSaleAndStock(values)
  }, [nowClickRowData])

  // 销毁正在出售
  const handleDestroySaleAndStock = useCallback(async() => {
    // 发送请求获取正在销售商品的数据
    const onSaleRes = await getOnSaleDataOfGoodsId(nowClickRowData.id)
    // 销售数量回归库存
    const onSaleAmountBackStocks = {
      amount: nowClickRowData.amount + onSaleRes[0].amount,
      sellState: !nowClickRowData.sellState,
    }
    //
    // 发送 axios 请求
    // 删除该商品的在售记录
    deleteOnSalesData(onSaleRes[0].id)
    // 库存回流
    updateStockOfCell(nowClickRowData.id, onSaleAmountBackStocks)
    // 添加操作记录
    addRecordData(generateDestroyCellRecord({
      name: nowClickRowData.name,
      username,
      price: onSaleRes[0].price,
      amount: onSaleRes[0].amount,
    }))
    // 关闭模态框
    setIsModalVisible2(false)
    message.success('取消出售成功')
    // 请求完毕后重新读取数据
    getGoodsList({_page: pageOrder, _limit: pageSize, inventoryId, name_like})
  }, [nowClickRowData])


  // 销售数据变动整合版
  const handleUpdateSaleAndStock = useCallback(async(values) => {
    // 提取数据
    const { id, name, imageUrl, amount, sellState  } = nowClickRowData
    //
    // 生成出售数据
    const sellData = {
      name,
      imageUrl,
      price: values.sellPrice,
      amount: values.amount,
      discount: 1,
      inventoryId: nowClickRowData.inventoryId,
      stockId: id,
    }
    // 生成库存更改记录
    const updateStock = {
      amount: (amount - values.amount),
      sellState: !sellState,
    }
    // console.log(sellData, records, updateStock)
    // 执行方法 发送 axios 请求
    // 添加出售数据
    addOnSalesData(sellData)
    // 生成记录数据
    // 用函数代替
    // 传递参数： 商品名字，用户名字，输入的价格，输入的数量
    addRecordData(generateCellRecord({name, username, price: values.sellPrice, amount: values.amount}))
    // 库存更改数据
    updateStockOfCell(id, updateStock)
    // 关闭模态框
    setIsModalVisible(false)
    message.success('设置成功')
    // 重新获取数据
    getGoodsList({_page: pageOrder, _limit: pageSize, inventoryId, name_like})
  }, [nowClickRowData])

  // 关闭模态框
  const handleCancel = useCallback(() => {
    setIsModalVisible(false);
  }, [isModalVisible])
  const handleCancel2 = useCallback(() => {
    setIsModalVisible2(false);
  }, [isModalVisible2])

  // 跳转到修改商品信息页面
  const editGoodsData = useCallback((record) => {
    navigate('/inventory/inventoryPost?id=' + record.id)
  }, [])

  // 删除
  const delStock = useCallback((record) => {
    message.warn('本店微小，还未营业，善待库存！')
  }, [])

  // 表格自定义渲染
  const columns = [
    {
      title: '出售状态',
      dataIndex: 'sellState',
      key: 'sellState2',
      render: (text) => <Switch checked={text} disabled />,
    },
    {
      title: '预览图',
      dataIndex: 'imageUrl',
      key: 'imageUrl',
      render: (text) => <Image
        width={50}
        src={text}
      />,
    },
    {
      title: '商品名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '产地',
      dataIndex: 'origin',
      key: 'origin',
    },
    {
      title: '生产日期',
      dataIndex: 'productionDate',
      key: 'productionDate',
    },
    {
      title: '保质期(天)',
      dataIndex: 'shelfLife',
      key: 'shelfLife',
    },
    {
      title: '批发价(￥)',
      dataIndex: 'buyPrice',
      key: 'buyPrice',
      render: (text) => (<span>{(text).toFixed(2)}</span>),
    },
    {
      title: '库存数量',
      dataIndex: 'amount',
      key: 'amount',
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'sellState',
      render: (text, record) => (
        <Space size="middle">
          <Button type='primary' onClick={editGoodsData.bind(null, record)}>修改</Button>
          <Button onClick={makeSell.bind(null, record)}>{text ? '结束' : '开始'}销售</Button>
          <Button danger onClick={delStock.bind(null, record)}>删除</Button>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John',
      lastName: 'Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
  ];

  return (
    <>
      {/* 搜索 */}
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        onFinish={onFinish}
      >
        <Form.Item
          name="select"
        >
          <Select
            style={{ width: 120 }}
            placeholder="请选择商品分类"
            options={inventories}
            fieldNames={{
              label: 'title',
              value: 'id',
            }}
          />
        </Form.Item>
        <Form.Item
          name="goodsName"
        >
          <Input
            placeholder="请输入查询商品名字"
          />
        </Form.Item>
        <Form.Item shouldUpdate>
          {() => (
            <Space size="middle">
              <Button
                type="primary"
                htmlType="submit"
              >
                查询
              </Button>
              <Button
                type="primary"
                onClick={onReset}
              >
              重置
              </Button>
              <Button
                type="primary"
                onClick={() => {navigate('/inventory/inventoryPost')}}
              >
              新增商品
              </Button>
            </Space>
          )}
        </Form.Item>
      </Form>

      {/* 表格 */}
      <Table
        dataSource={goodsData}
        columns={columns}
        rowKey='id'
        // rowSelection={{
        //   type: 'checkbox',
        // }}
        pagination={{
          position: ['topLeft'],
          pageSizeOptions: [1, 3, 5, 10],
          showSizeChanger: true,
          showQuickJumper: true,
          current: pageOrder,
          pageSize: pageSize,
          total,
          onChange: pageSelect,
        }}
      >
      </Table>

      {/* 开始出售 模态框 */}
      <Modal
        title="设定出售数量和销售定价"
        visible={isModalVisible}
        onCancel={handleCancel}
        keyboard
        footer={null}
      >
        <p>
          商品名称： {nowClickRowData ? nowClickRowData.name : ''}
        </p>
        <br />
        <Form
          name="sellForm"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ amount: 0, sellPrice: nowClickRowData ? nowClickRowData.buyPrice : 0 }}
          onFinish={handleOk}
          autoComplete="off"
        >
          <p>
          出售数量：
          </p>
          <br />
          <Form.Item
            name="amount"
            rules={[{ required: true, message: '' }]}
          >
            <InputNumber
              min={0}
            />
          </Form.Item>
          <p>
          出售价格：
          </p>
          <br />
          <Form.Item
            name="sellPrice"
            rules={[{ required: true, message: '' }]}
          >
            <InputNumber
              min={nowClickRowData ? nowClickRowData.buyPrice : 0}
              addonAfter="￥"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      {/* 取消出售 模态框 */}
      <Modal
        title="确认提示"
        visible={isModalVisible2}
        onOk={handleDestroySaleAndStock}
        onCancel={handleCancel2}
      >
        <p>是否取消该商品的出售？</p>
      </Modal>
    </>
  )
}

// 列表页渲染流程

/*
1. 首先表单的模板引用
1.1 根据分类选择 级联选择 还是 选择器
1.2 选择器使用 options 和 fieldName 自定义内容，自定义内容的属性是固定的，属性值指向获取到的数据的属性名，类型是 String
1.3 options绑定的是数据，先创建一个 useState，然后使用 useEffect(()=>{},[]) 即 componentDidMount 获取数据并更新
1.4 表单部分基础功能完成

2. 表格模板引用，使用 table
2.1 同样使用模板渲染，DataSource 指向 数据，columns 指向 自定义渲染
2.2 dataSource 的获取和表单的分类一样，略
2.3 columns 参照官方文档样式使用，如果有复杂渲染则使用 render
2.4 table 父级标签上添加 rowKey 属性，指向 id ，属性值是 String 类型
2.5 配置分页的类型

3. 实现分页功能
3.1 注册分页数据的 state
3.2 根据函数尝试修改数值并测试
3.3 结合 axios 请求 同时对 table 内容进行分页查询 将所有数据修改合并到一起
*/
